/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import {View, TextInput, Text} from 'react-native';
import { Modal } from 'antd-mobile-rn';
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader } from '../../../library/comp';
import { Dialog, Http, PageBase, Time } from '../../../library/func';
import Design from '../../../design';
import Config from '../../../config';

/**************************************************************************************** Pageload */

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/**************************************************************************************** Page */
 export default class Index extends PageBase {
    constructor(props) {
        super(props);
        this.state = {
            //显示添加车辆的模态框
            list:[],
        };
    }

    /************************************************************************************ Life */
    /**
     * didMount
     */
    componentDidMount(){

        // 页面加载
        // this.pageload();
        this.getList();
    }



    //获取列表数据
    getList = () =>{
        console.log('租车位车辆列表');
        Http.get({
            url: 'page/outcar/list.php',
            success: (data)=> {
                this.setState({
                    list:data
                })
            },
            pipe: Config.pipe.action.default
        })
    }

    //添加车辆
    addCar = (set_number) =>{
        if(set_number == ""){
            Dialog.text("车牌照不能为空", 1);
            return;
        }
        Http.post({
            url: 'page/outcar/logic/add.php',
            data: {
                set_number:set_number
            },
            success: (data)=> {
                Dialog.text("添加成功", 1);
                this.getList();
            },
            error:(msg) => {
                Dialog.text(msg, 1);
            },
            pipe: Config.pipe.action.default
        })
    }

    //删除车辆
    delCar = (id) =>{
        Http.post({
            url: 'page/outcar/logic/delete.php',
            data: {
                id:id
            },
            success: (data)=> {
                Dialog.text("删除成功", 1);
                this.getList();
            },
            pipe: Config.pipe.action.default
        })
    }

    /**
    * 时间戳转日期
    */
    toDate(dateStamp){
        let now = new Date(dateStamp*1000);
        // 获取日期 格式 12-09
        let year = now.getFullYear();
        let month = now.getMonth()+1;
        let day = now.getDate();
        // 月份日期补0
        month <10 && (month = '0'+month)
        day <10 && (day = '0'+day)
        let Sdate = year + '/' + month + '/' + day;
        // 获取时间 格式 08:00
        return Sdate;
    }

    /************************************************************************************ Render */
    render(){
        let now_time = Time.get10();
        return(
            <CPage>

                <CScroll bg='#efeff4' my='96'>

                    { this.state.list.length == 0 ?
                    
                    <CRow x="center" onPress={e=>{}}>
                        <CItemY x="cener" my="100"> 
                            <CIcon width="150" height="150" color="#999" icon={ Design.icon["mycar-list"] }></CIcon>
                            <CText color="#999" size="30">
                            还没有添加车辆，
                            </CText>
                        </CItemY>
                    </CRow>
                    :
                    <CItemY f="1">
                        {this.state.list.map((item,index)=>{
                            return(
                                <CRow onPress={e=>{

                                }}>
                                    <CItemY bg="#fff" mt="20" >
                                        <CBetween py='20' px="40" style={{ borderBottomColor:"#efeff4", borderBottomWidth:1 }}>
                                            <CLine f="1">
                                                <CText size='26' color='#333'>车牌号：</CText>
                                                <CText size='26' color='#333'>{ item.set_number }</CText>
                                            </CLine>
                                            {
                                            now_time > item.time_over ? 

                                            <CLine f="0.4" x="right" onPress={e=>{
                                                Modal.alert('删除', '确定删除吗？', [
                                                    { text: '取消', onPress: () => {}, style: 'cancel' },
                                                    { text: '确定', onPress: () => { this.delCar(item.id) } },
                                                  ]);
                                            }}>
                                                <CText size='26' color='#333'>删除</CText>
                                            </CLine>
                                            :
                                            <CLine f="0.4" x="right">
                                            </CLine>

                                            }
                                        </CBetween>

                                        {
                                            now_time > item.time_over ? 
                                            <CBetween w="750" py="20" px='40'>
                                                <CHand x="left">
                                                    <CText size='24' color="#999">已欠费</CText>
                                                </CHand>
                                                <CItemX x="right" y='center'
                                                    onPress={
                                                        (e) =>
                                                        this.nav.navigate('Service_Cartpark_Pay',{ set_number:item.set_number })
                                                    }
                                                >
                                                    <CHand>
                                                        <CText size='26' color="#f00"
                                                        >充值</CText>
                                                        <CIcon icon={ Design.icon["make-right"] } w='26' h='26' ml='8' color='#f00'></CIcon>
                                                    </CHand>
                                                </CItemX>
                                            </CBetween>
                                            :
                                            <CBetween w="750" py="20" px='40'>
                                                <CHand x="left">
                                                    <CText size='26' color='#333'>到期时间：</CText>
                                                    <CText size='24' f="1" color="#666">{ this.toDate(item.time_over) }</CText>
                                                </CHand>
                                            </CBetween>
                                        }

                                    </CItemY>
                                </CRow>
                            )
                        })}
                    </CItemY>


                    }







                </CScroll>

                {/* header */}
				<PHeader nav={this.nav}>可进场车辆</PHeader>

                {/* 底部 */}
                <CFooter h='96' y='center' bg='#fff' style={{ borderTopColor:"#eee", borderTopWidth:1 }}>
                    <CHand w="750" h="96" bg="#00CC66" x="center" y="center">
                        <CButton  {...Design.global.commonButton} ra='0' size='34' onPress={(e)=> {
                        Modal.prompt(
                            '添加',
                            null,
                            (val) => {
                                this.addCar(val);
                            },
                            'default',
                            null,
                            ['请输入您的车牌号,例:冀F88888'],
                        );

                }}>添加车辆</CButton>
                    </CHand>
                </CFooter>
                {/* 底部 */}




            </CPage>
        )
    }
}
